import React, { useEffect, useState, useRef } from 'react'

import { Button, Image, message, Typography } from 'antd';
import { FileDoneOutlined } from '@ant-design/icons';
import uploadFileIcon from '../../res/upload_file.png'

import styles from './index.module.css'

//上传风险库文件
function UploadRiskFile() {
    const { Text } = Typography;

    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    const [uploadFile, setUploadcFile] = useState();
    const [spanText, setSpanText] = useState('点击上传文件');

    //[]空数组相当于componentDidMount
    useEffect(() => {

        return () => {
        }
    }, []);

    function upload() {
        document.getElementById('fileInput').click();
    }

    function downLoadTemplate() {
        messageApi.open({ type: 'error', content: '下载模板' });
    }

    function fileSelected() {
        let fileInput = document.getElementById('fileInput');
        let file = fileInput.files[0];
        if (file === undefined) {
            //用户取消选择
            messageApi.open({ type: 'error', content: '取消选择' });
            return
        }
        //判断xlsx文件
        if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
            messageApi.open({ type: 'error', content: '请选择xlsx文件' });
            return
        }
        //文件大小判断
        const fileSize = file.size//文件大小（字节）
        if (fileSize > 1024 * 1024 * 2) {
            messageApi.open({ type: 'error', content: '请选择小于2M的文件' });
            return
        }
        setSpanText('待上传文件：' + file.name)
        setUploadcFile(file)
    }

    return (
        <div className={styles.container}>
            {contextHolder}
            <input type="file" id="fileInput" style={{ display: 'none' }} onChange={fileSelected} />
            <div className={styles.template_box}>
                <Text onClick={downLoadTemplate} underline>点击下载模板</Text>
                <FileDoneOutlined></FileDoneOutlined>
            </div>
            <div className={styles.root}>
                <Image className={styles.img_upload} onClick={upload} preview={false} width={75} src={uploadFileIcon} />
                <span onClick={upload} className={styles.sp_text}>{spanText}</span>
                <Button size={'large'} className={styles.btn_confirm} type="primary">确认上传</Button>
            </div>
        </div>
    )
}

export default UploadRiskFile;